<template>
    <div class="tdFooter">
        <span>总计{{ count }}</span>
        <div class="tdTabs">
            <a :class="{ active: tabType === 0 }" @click="tabClick(0)">全部</a>
            <a :class="{ active: tabType === 1 }" @click="tabClick(1)">未完成</a>
            <a :class="{ active: tabType === 2 }" @click="tabClick(2)">已完成</a>
        </div>
    </div>
</template>

<script>
export default {
    props: ["tabType", "count", "changeTabType"],

    methods: {
        tabClick(newTabType) {
            this.$emit('changeTabType', newTabType)
        }
    },

}
</script>

<style>
.tddFooter {
    background: #fff;
    padding: 10px 20px;
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
}

.tdTabs {
    padding-top: 10px;
}

a {
    padding: 0 10px;
    margin-top: 10px;
    cursor: pointer;
}

.active {
    color: #4e6ef2;
}
</style>